<template>
<div class="container">
  <div id="echartsPie" style="width: 6.667rem;height: 8rem;">
  </div>
  <div style="width: 100%">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
  </div>

  <div style="width: 8rem;">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <van-cell v-for="item in list" :title="item.name" size="large" :label="item.num + '/件'" :key="item.name">
      <template>
          <span>价格:{{item.price}}元</span> <br>
          <span>进货时间:{{item.time}}</span><br>
          <span>总价:{{item.totalprice}}</span><br>
          <van-image
            width="100"
            height="100"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
      </template>
    </van-cell>
  </van-list>
  </div>
</div>
</template>

<script>
    export default {
        name: "home",
      data(){
          return{
            value1: 0,
            value2: 'a',
            option1: [
              { text: '全部商品', value: 0 },
              { text: '新款商品', value: 1 },
              { text: '活动商品', value: 2 },
            ],
            option2: [
              { text: '默认排序', value: 'a' },
              { text: '好评排序', value: 'b' },
              { text: '销量排序', value: 'c' },
            ],
            list: [{
              name : '袜子',
              num : 10,
              time : '2023/10/10',
              price : 10
            },
              {
                name : '袜子2',
                price : 10,
                num : 10,
                time : '2023/10/10'
              },],
            loading: false,
            finished: false,
          }
      },
      methods:{
          onLoad(){

          },
          getRender(){
            let Echarts = this.$echarts.init(document.getElementById('echartsPie'));
            let config = {
              title : {
                text : '日常数据统计',
              },
              tooltip:{},
              xAxis : {
                type: 'category',
                data : ['发带','皮筋','短袜子','长袜','头簪','发带2']
              },
              yAxis:{
                type: 'value',
              },
              series:[
                {
                  name : '销量',
                  type : 'bar',
                  data : [20,30,40,5,10,50],
                }
              ]
            };
            Echarts.setOption(config)
          }
      },
      mounted(){
          this.getRender();
      }
    }
</script>

<style scoped>
.container{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>
